import React, { Component } from 'react';
import { Table, Modal, Form, Input, Select } from 'antd';
import { Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons'
import { connect } from 'dva'
const { Option } = Select;
const { confirm } = Modal;
const mapStateToProps = (state) => {
  console.log(state,'1.........................')
  return state.classmanagemeng
}
@connect(mapStateToProps)
class ClassManagemeng extends Component {
  state = {
    visible: false,
    confirmLoading: false,
    grade_name: ''
  };
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  handleCancel =()=>{
    this.setState({
      visible: false,
    });
  }
  fetchQuestions = (payload = {}) => {
    console.log(payload)
    this.props.dispatch({
      type: 'classmanagemeng/mangergrade',
      payload
    })
    this.setState({
      visible: false,
    });
  }

  addmangerroom = (val) => {
    this.setState({
      TopVal:val
    })
  };

  DeleteBtn = (payload) => {
    this.props.dispatch({
      type: 'classmanagemeng/mangergradedelete',
      payload
    })
  }

  showPropsConfirm(payload) {
    this.props.dispatch({
      type: 'classmanagemeng/mangergradedelete',
      payload
    })
    confirm({
      title: '确定要删除吗?',
      content: 'Some descriptions',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        console.log(this)
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  get columns() {
    return [
      {
        title: '班级名',
        dataIndex: 'grade_name',
        key: 'grade_name',
        render: text => <a>{text}</a>
      },
      {
        title: '课程名',
        dataIndex: 'subject_text',
        key: 'subject_text',
      },
      {
        title: '教室号',
        dataIndex: 'room_text',
        key: 'room_text',
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <a style={{ marginRight: 16 }}>修改</a>
            <a onClick={()=>{this.showPropsConfirm(record.grade_id)}}>删除</a>
          </span>
        ),
      },
    ];
  }
    render() {
      const {grade_name, confirmLoading} = this.state
        return (
            <div>
                <div>班级管理</div>
                <div>
                  <Button type="primary" icon={<PlusOutlined />} onClick={this.showModal}>班级管理</Button>
                  <Modal
                    title="添加班级"
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    footer={
                      []
                    }
                  >
                    <Form
                      name=""
                      className=""
                      initialValues={{
                        grade_name: '',
                        room_id: '',
                        subject_id: ''
                      }}
                      onFinish={this.fetchQuestions}
                    >
                      <Form.Item name="grade_name">
                        <Input type="text" placeholder="班级名"  onChange={(e)=>{this.addmangerroom(this.setState({grade_name:e.target.value}))}} />
                      </Form.Item>
                      <Form.Item label="教室号" name="room_id">
                        <Select style={{ width: 150 }}>
                          <Option value="" selected disabled style={{ display: 'none'}} key={1}>全部</Option>
                          {
                            this.props.mangerroom.map(item => <Option value={item.room_id} key={item.room_id}>{item.room_text}</Option>)
                          }
                        </Select>
                    </Form.Item>
                    <Form.Item label="所有课程" name="subject_id">
                        <Select style={{ width: 150 }}>
                          <Option value="" selected disabled style={{ display: 'none'}} key={1}>全部</Option>
                          {
                            this.props.fetchSubjectList.map(item => <Option value={item.subject_id} key={item.subject_id}>{item.subject_text}</Option>)
                          }
                        </Select>
                    </Form.Item>
                    <Form.Item>
                      <Button type="primary" htmlType="submit">添加</Button>
                    </Form.Item>
                    </Form>
                  </Modal>
                </div>
                <Table columns={this.columns} dataSource={this.props.getmangergradeList.data} />
            </div>
        );
    }
}

export default ClassManagemeng;
